<template>
    <div class="layout-padding">
        <div class="layout-padding-auto ">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane name="first">
                    <template #label>
                        <el-icon>
                            <calendar />
                        </el-icon>
                        <span class="ml-0.5"> {{ $t('pgrade.poShip') }} </span>
                    </template>
                </el-tab-pane>
                <el-tab-pane name="sercond">
                    <template #label>
                        <el-icon>
                            <Box />
                        </el-icon>
                        <span class="ml-0.5"> {{ $t('pgrade.shipDetail') }} </span>
                    </template>
                </el-tab-pane>
            </el-tabs>
            <poShip ref="locationRef" v-if="activeName === 'first'" />
            <shipDetail ref="locationRef" v-if="activeName === 'sercond'" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus'
import poShip from "/src/views/mes/orderDetails/poShip.vue"
import shipDetail from "/src/views/mes/orderDetails/shipDetail.vue"
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 搜索变量
const queryRef = ref
const locationRef = ref()
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    activeName.value = tab.props.name
}
</script>